<template>
  <TresObject3D ref="object">
    <Sphere :args="[0.3]" :color="'#ff00ff'" :position="p1" />
    <Sphere :args="[0.3]" :color="'#ff00ff'" :position="p2" />
    <Line2
      :points="[p1, p2]"
      :color="'#ff0000'"
      :width="2"
      dashed
      :dash-size="1"
      :gap-size="1"
    />
    <Line2
      :points="[p1, px]"
      :color="'#cccccc'"
      dashed
      :dash-size="0.3"
      :gap-size="0.3"
    />
    <Line2
      :points="[p1, py]"
      :color="'#cccccc'"
      dashed
      :dash-size="0.3"
      :gap-size="0.3"
    />
    <Line2
      :points="[p1, pz]"
      :color="'#cccccc'"
      dashed
      :dash-size="0.3"
      :gap-size="0.3"
    />

    <Circle
      :position="p1"
      :args="[1, 32, 0, rotation.x]"
      :rotation="[Math.PI / 2, 0, 0]"
    >
      <TresMeshToonMaterial :side="THREE.DoubleSide" :color="'#ff0000'" />
    </Circle>

    <Circle
      ref="meshRef"
      :position="p1"
      :args="[1, 32, 0, rotation.y]"
      :rotation="[0, -Math.PI / 2, Math.PI / 2]"
    >
      <TresMeshToonMaterial :side="THREE.DoubleSide" :color="'#ffff00'" />
    </Circle>

    <Circle :position="p1" :args="[1, 32, 0, rotation.z]" :rotation="[0, 0, 0]">
      <TresMeshToonMaterial :side="THREE.DoubleSide" :color="'#0000ff'" />
    </Circle>
    <TresAxesHelper :args="[5]" :position="p1" />
  </TresObject3D>
</template>
<script lang="ts" setup>
import * as THREE from 'three'
import { Sphere, Text3D, Line2, Circle } from '@tresjs/cientos'
import { MathUtils } from '@/graph/3d/utils'
import * as dat from 'dat.gui'

class V3 extends THREE.Vector3 {}

const props = defineProps<{
  p1: THREE.Vector3
  p2: THREE.Vector3
}>()

const px = props.p2.clone().setX(props.p1.x)
const py = props.p2.clone().setY(props.p1.y)
const pz = props.p2.clone().setX(props.p1.z)

const rotation = MathUtils.calculateRotation(props.p2, props.p1)

const meshRef = shallowRef()

// onMounted(() => {
//   const gui = new dat.GUI()
//   gui
//     .add(meshRef.value.instance.rotation, 'y', -Math.PI * 2, Math.PI * 2)
//     .step(0.001)
//     .listen()
//   gui
//     .add(meshRef.value.instance.rotation, 'z', -Math.PI * 2, Math.PI * 2)
//     .step(0.001)
//     .listen()
// })
</script>
